<template>
	<view >
		<view class="top">
			<view style="overflow: hidden;"></view>
			<view class="tx">
				支持以下银行
			</view>
			<view class="blck" style="margin-top: 40rpx;" >
				<image src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/business/jianshe.png" mode="" class="img1"></image>
				<text class="center">建设银行</text>
				<image src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/business/Vector%20574%402x.png" mode="" class="img2"></image>
			</view>
			<view class="blck" style="margin-top: 20rpx;">
				<image src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/business/gongshang.png" mode="" class="img1"></image>
				<text class="center">工商银行</text>
				<image src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/business/Vector%20574%402x.png" mode="" class="img2"></image>
			</view>
			<view class="blck" style="margin-top: 20rpx;">
				<image src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/business/youzhen.png" mode="" class="img1"></image>
				<text class="center">邮政银行</text>
				<image src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/business/Vector%20574%402x.png" mode="" class="img2"></image>
			</view>
			<view class="blck" style="margin-top: 20rpx;">
				<image src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/business/nongye.png" mode="" class="img1"></image>
				<text class="center">农业银行</text>
				<image src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/business/Vector%20574%402x.png" mode="" class="img2"></image>
			</view>
			<view class="bottom">
				共支持128家银行,未显示的请自行添加
			</view>
		</view>
		<view class="main">
			<view style="overflow: hidden;"></view>
			<view class="tx">
				输入卡号添加
			</view>
			<view class="input" style="margin-top: 20rpx;">
				<text class="left">卡号</text>
				
				<input type="text" placeholder="请输入银行卡号或拍照识别" class="ipt" v-model="bankNumber"/>
				<ocr-navigator @onSuccess="blankSuccess" :onSuccess="blankSuccess" certificateType="bankCard">
					<!-- <button type="primary" class="ocr-wrapper">银行卡识别</button> -->
					<image src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/business/xj.png" mode="" class="img3"></image>
				</ocr-navigator>
			</view>
			
			<view class="input" style="margin-top: 20rpx;">
				<text class="left">银行</text>
				<input type="text" placeholder="请输入银行名称" class="ipt" v-model="bankName"/>
				<image src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/business/Vector%20574%402x.png" mode="" class="img4"></image>
			</view>
			<view class="input" style="margin-top: 20rpx;">
				<text class="left">姓名</text>
				<input type="text" placeholder="请输入开户姓名" class="ipt" v-model="Name"/>
				<image src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/business/Vector%20574%402x.png" mode="" class="img4"></image>
			</view>
			<view style="width: 100%;height: 30rpx;margin-top: 30rpx;">
				
			</view>
		</view>
		<view class="btn" @click="btn">
			<view style="overflow: hidden;"></view>
			<view class="btn1">
				提交
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bankNumber:'',
				bankName:'',
				Name:''
			}
		},
		methods:{
			blankSuccess(e){
				this.bankNumber = e.detail?.number.text
			},
			btn(){
				let reg = /^([1-9]{1})(\d{14,18})$/;
				if(this.bankName == ''){
					uni.showToast({
						title: '银行名称不能为空',
						icon: 'error',
						duration: 2000
					}) 
				}else if(this.Name == ''){
					uni.showToast({
						title: '姓名不能为空',
						icon: 'error',
						duration: 2000
					}) 
				}else if(!reg.test(this.bankNumber)){
					uni.showToast({
						title: '卡号错误！',
						icon: 'error',
						duration: 2000
					}) 
				}else{
					let obj = {
						bank_code:this.bankNumber,
						bank_name:this.bankName,
						bank_user:this.Name,
						is_status:0
					}
					this.$u.api.user.updateBank(obj).then(res =>{
						if(res.code == 200){
							uni.showToast({
								title: res.msg,
								icon: 'success',
								duration: 2000
							}) 
						// let pages = getCurrentPages() 
						// let prevPage = pages[pages.length -2] 
						
							setTimeout(()=>{
								uni.navigateBack({
								        delta: 1,
								})
							},2000)
						}
						 
					}).catch(req =>{
						uni.showToast({
							title: req.msg,
							icon: 'error',
							duration: 2000
						}) 
					})
				}
					
				
				
			}
			
		},
		onLoad() {
		
		},
		onShow() {  
			
		}
	}
</script>

<style>
	.top{
		width: 690rpx;
		height: 580rpx;
		margin-left: 30rpx;
		background-color: white;
		margin-top: 30rpx;
		border-radius: 16rpx;
	}
	.main{
		width: 690rpx;
		/* height: 520rpx; */
		margin-left: 30rpx;
		background-color: white;
		margin-top: 30rpx;
		border-radius: 16rpx;
	}
	.tx{
		margin-top: 30rpx;
		margin-left: 30rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: black;
	}
	.blck{
		width: 630rpx;
		height: 80rpx;
		border-bottom: 1rpx solid #E6E6E6;
		display: flex;
		margin-left: 30rpx;
	}
	.img1{
		width: 40rpx;
		height: 40rpx;
		margin-top: 20rpx;
	}
	.img2{
		width: 8rpx;
		height: 14rpx;
		margin-top: 33rpx;
	}
	.img4{
		width: 8rpx;
		height: 14rpx;
		margin-left: 30rpx;
	}
	.img3{
		width: 40rpx;
		height: 40rpx;
		margin-left: 10rpx;
	}
	.center{
		width: 562rpx;
		height: 80rpx;
		margin-left: 10rpx;
		line-height: 80rpx;
	}
	.bottom{
		/* border: 1px red solid; */
		width: 100%;
		font-size: 22rpx;
		text-align: center;
		margin-top: 30rpx;
		color: #666;
	}
	.input{
		width: 630rpx;
		height: 80rpx;
		border-bottom: 1rpx solid #E6E6E6;
		display: flex;
		margin-left: 30rpx;
		align-items: center;
		
	}
	.ipt{
		width: 450rpx;
		margin-left: 50rpx;
		/* border: 1rpx solid red; */
	}
	.ipt1{
		width: 450rpx;
		margin-left: 20rpx;
		/* border: 1rpx solid red; */
	}
	.left{
		color: black;
		line-height: 80rpx;
	}
	.btn{width: 100%;height: 136rpx;background-color: white;margin-top: 30rpx;position: fixed;bottom: 0;}
	.btn1{width: 690rpx;height: 88rpx;margin-top: 24rpx;margin-left: 30rpx;border-radius: 44rpx;background-color: #36BE6A;text-align: center;line-height: 88rpx;font-size: 32rpx;font-weight: bold;color: white;}
</style>